import React from 'react'
import { Tag, Space } from 'antd'
import { useT } from '@designable/event-system'
import { useForm } from '@formily/react'
import { observer } from '@formily/reactive-react'

// 状态颜色映射
const statusColor: any = {
  finish: 'success',
  sales_finish: 'success',
  cancel: 'error',
  canceling: 'processing',
  using: 'processing',
  wait_pay: 'processing',
  wait_hand: 'processing',
  wait_settle: 'processing',
  wait_use: 'processing',
  wait_audit: 'processing',
  wait_receive: 'processing',
  wait_deliver: 'processing',
  sales_canceling: 'processing',
  appointment_failed: 'error',
  deliver: 'success',
}

export const OrderHeader: React.FC<{
  title: string
  style?: React.CSSProperties
  children?: React.ReactNode
}> = observer((props) => {
  const { title, style, children } = props
  const $t = useT()
  const form = useForm()
  const formValues = form.getFormState().values

  // 从表单中获取 orderNo 值作为标题
  const orderNo = formValues?.orderNo || title
  const orderStatus = formValues?.orderStatus || 'wait_hand'
  const orderStatusName = formValues?.orderStatusName || '订单状态'
  const isSubOrderNo = formValues?.isSubOrderNo || false

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'space-between',
        ...style,
      }}
    >
      <div
        style={{
          display: 'flex',
          alignItems: 'flex-start',
          fontSize: 20,
          marginBottom: 20,
        }}
      >
        <span style={{ fontWeight: 'bold' }}>
          {$t('订单编号')}：{orderNo}
        </span>
        <div style={{ marginLeft: 10 }}>
          {isSubOrderNo && <Tag style={{ fontSize: 14 }}>{$t('子订单')}</Tag>}
          <Tag style={{ fontSize: 14 }} color={statusColor[orderStatus]}>
            {orderStatusName}
          </Tag>
        </div>
      </div>
      <Space>{children}</Space>
    </div>
  )
})
